<template>
  <div>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
		<el-tab-pane label="抄表选项管理" name="first">抄表选项管理</el-tab-pane>
		<el-tab-pane label="定时抄表" name="second"></el-tab-pane>
			
		<el-tab-pane label="手动抄表" name="third">
     <div class="big_center">
            	  <el-table class="big_table"
                    ref="multipleTableRef"
                    :data="tableDataList"
                    style="width: 100%"
                >
        <el-table-column>
         <template #header>
         <div class="center_QX" @click="allRow">全选</div>
        </template>
             <template #default="scope">
                <el-checkbox v-model="scope.row.checked" size="large" @change="choose(scope.$index)"/>
             </template>
        </el-table-column>



                   <el-table-column property="campus" label="校区" width="60" />
                    <el-table-column property="buildings" label="楼栋" width="60" />
                    <el-table-column property="dormitoryNumber" label="宿舍号" width="80" />
                     <el-table-column property="deviceNumber" label="设备编号" width="80" />
                    <el-table-column property="deviceType" label="设备类型" width="100" />
                     <el-table-column property="gatewayNumber" label="网关编号" width="100" />
                    <el-table-column property="deviceStatus" label="设备状态" width="100" />
                     <el-table-column property="remainingAmount" label="剩余金额" width="100" />
                    <el-table-column property="totalPower" label="总电量" width="100" />
                     <el-table-column
          prop="total_active_power"
          label="总有功电量"
          width="160px"
        >
          <template #default>
            <div class="tags">
              <el-tag
                link
                type="warning"
                size="small"
                v-for="item in power.total_actice_power"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="single_phase_data"
          label="单相数据"
          width="160px"
        >
          <template #default>
            <div class="tags">
              <el-tag
                link
                type="warning"
                size="small"
                v-for="item in power.single_phase_data"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="ABC三相数据" width="160px">
          <template #default>
            <div class="tags">
              <el-tag link type="warning" size="small">ABC三相电压(V)</el-tag>
              <el-tag link type="warning" size="small">ABC三相电流(A)</el-tag>
              <el-tag link type="warning" size="light"
                >总ABC<br />
                三相功率(W)</el-tag
              >
              <el-tag link type="warning" size="light"
                >总ABC三相<br />
                无功功率(W)</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="功率因素" width="160px">
          <template #default>
            <div class="tags">
              <el-tag
                link
                type="warning"
                size="small"
                v-for="item in power.power_factor"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>

                     <el-table-column align="right">
                            <template #header>
                                <div class="center_RC">操作</div>
                            </template>
                            <template #default="scope">
                                <el-button color="rgb(2,167,240)" size="small" @click="handleEdit()">抄表</el-button>
                            </template>
                      </el-table-column>
                </el-table>
                        <div class="footer_All">
                            <div class="footer_left">
                            <el-input class="ipt_left" v-model="input4" placeholder="设备编号" />
                            <el-input class="ipt_right" v-model="input5" placeholder="网关编号" />
                            <el-button class="btn_left" type="primary">查询</el-button>
                            <el-button class="btn_right" type="success">批量抄表</el-button>
                            </div>
                            <div class="footer_right"><el-pagination
                              v-model:currentPage="currentPage4"
                              v-model:page-size="pageSize4"
                              :page-sizes="[5,10,200]"
                              :small="small"
                              :disabled="disabled"
                              :background="background"
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="200"
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                            />
                            </div>
                        </div>
         </div>
            </el-tab-pane>
            
		<el-tab-pane label="抄表记录" name="fourth">抄表记录</el-tab-pane>
		
	</el-tabs>
	</div>
</template>
<script lang="ts" setup>
	import {ref, reactive} from 'vue'
	import type {TabsPaneContext} from 'element-plus'
	import { ElTable } from 'element-plus'
  import { number } from 'echarts'

interface User {
    checked:boolean
    campus:string
    buildings: string
    dormitoryNumber: string
    deviceNumber: string
    deviceType:string
    gatewayNumber:string
    deviceStatus: string
    remainingAmount: string
    totalPower: string
    
}

// 页面点击进来跳转到第三手动抄表
const activeName = ref('third')


// 多选

let checked1 = ref(false)
let flag = true
let index = 0
// 全选
const allRow =()=>{
  for(const d of tableDataList ){
    d.checked = true
  }
}

const choose = (row) =>{
    index =  row
}



const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])



// 页面输入框  v-model
const input4 = ref('')
const input5 = ref('')

const tableDataList: User[] = reactive([
  {
    checked:true,
    campus:'东校区',
    buildings: '1栋',
    dormitoryNumber:'985',
    deviceNumber:'001',
    deviceType:'a',
    gatewayNumber: '001',
    deviceStatus:'无',
    remainingAmount:'9.05',
    totalPower:'',
   
  },
   {
    checked:true,
    campus:'东校区',
    buildings: '1栋',
    dormitoryNumber:'985',
    deviceNumber:'001',
    deviceType:'a',
    gatewayNumber: '001',
    deviceStatus:'无',
    remainingAmount:'9.05',
    totalPower:'',
   
  },
   {
    checked:true,
    campus:'东校区',
    buildings: '1栋',
    dormitoryNumber:'985',
    deviceNumber:'001',
    deviceType:'a',
    gatewayNumber: '001',
    deviceStatus:'无',
    remainingAmount:'9.05',
    totalPower:'',
  
  },
   {
    checked:true,
    campus:'东校区',
    buildings: '1栋',
    dormitoryNumber:'985',
    deviceNumber:'001',
    deviceType:'a',
    gatewayNumber: '001',
    deviceStatus:'无',
    remainingAmount:'9.05',
    totalPower:'',
   
  },
   {
    checked:true,
    campus:'东校区',
    buildings: '1栋',
    dormitoryNumber:'985',
    deviceNumber:'001',
    deviceType:'a',
    gatewayNumber: '001',
    deviceStatus:'无',
    remainingAmount:'9.05',
    totalPower:'',
   
  },
]);

const power = {
  total_actice_power: [
    { name: "总有功尖电量" },
    { name: "总有功峰电量" },
    { name: "总有功平电量" },
    { name: "总有功谷电量" },
  ],
  single_phase_data: [
    { name: "单相电压(V)" },
    { name: "单相电流(A)" },
    { name: "单项功率(W)" },
  ],
  power_factor: [
    { name: "功率因素" },
    { name: "A相功率因素" },
    { name: "B相功率因素" },
    { name: "C相功谷电量" },
  ],
};
	
  // 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {

  console.log(`current page: ${val}`)
}	




</script>
<style scope>

/* 主要总布局 */
.big_center{
  background: #FFFFFF;
  margin: 30px 30px 30px 0;
  border: 1px solid rgb(175, 172, 172);
  font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: normal;
    vertical-align: none;
    text-align: center;
    line-height: normal;
    text-transform: none;
     border-radius: 10px;
     box-shadow: 10px 10px 5px #b9b9b9;
     /* overflow:auto; */
}

.big_table{
  margin-top: 30px;
}

/* 多列 */
.el-form-item {
  margin-right: 15px;
}
.el-form-item__content {
  width: 100%;
}
.demo-pagination-block {
  margin-top: 16px;
}
.el-tag {
  text-align: center;
  background: #FACD91;
  color: #B8741A;
}
.tags .el-tag {
  width: 95px;
  /* display: block; */
  margin-bottom: 4px;
}


	/*表格表头全选*/
	.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
	  margin-left: -30px;
	  position:relative;
    background: #B8741A;
	}
	.el-table /deep/.DisabledSelection .cell:before{
	  content:"全选";
	  position:absolute;
	  right:11px;
    background: #B8741A;
	}

  /* 底部布局 */

  .footer_All{
    display: flex;
    margin-top:30px;
    margin-bottom: 30px;
    /* background: rgb(164, 35, 35); */
  }
  .footer_left{
    width: 50%;
    /* background: #6c1953; */
  }
   .footer_right{
    width: 50%;
    /* background: #52b93b; */
  }


/* 底部按钮 */
  .ipt_left{
    margin-left: 30px;
    width: 200px;
    border-radius: 30px;
  }
  .ipt_right{
    margin-left: 10px;
    width: 200px;
    border-radius: 30px;
  }
  .btn_left{
    margin-left: 10px;
  }
  .btn_right{
    margin-left: 30px;
  }

 



	

	

</style>
